<!--log function -->
<template>
  <div class="log_function">
    <div style="color:#404040;font-weight:400;display:flex;justify-content:flex-end;align-items:center">
      <el-tooltip class="item"
                  effect="dark"
                  content="Refresh"
                  :open-delay="1000"
                  placement="top">
        <span v-loading="syncLoading"
              element-loading-spinner="el-icon-loading"
              v-show="itemInfo.showSync"
              @click="syncData"
              style="font-size:14px;padding:2px 7px;margin-left:10px"
              class="cuser cuifont icon_arrow_sync"></span>
      </el-tooltip>
      <el-tooltip class="item"
                  effect="dark"
                  :open-delay="1000"
                  content="Test"
                  placement="top">
        <span v-loading="testLoading"
              element-loading-spinner="el-icon-loading"
              v-show="itemInfo.showTest&&itemInfo.showOnOff"
              @click="startTest(itemInfo)"
              style="font-size:14px;padding:2px 7px;margin-left:10px"
              class="cuser cuifont icon_beaker"></span>
      </el-tooltip>
      <el-tooltip v-if="onoff !== 'ON'&&itemInfo.showOnOff"
                  class="item"
                  effect="dark"
                  :open-delay="1000"
                  content="Start Sync"
                  placement="top">
        <span v-loading="btnLoading"
              element-loading-spinner="el-icon-loading"
              @click="startStop(itemInfo)"
              style="font-size:14px;padding:2px 7px;margin-left:10px"
              class="cuser cuifont icon_play"></span>
      </el-tooltip>
      <div style="margin-top:-2px">
        <el-popover placement="bottom-start"
                ref="popover"
                width="200"
                trigger="click">
        <template>
          <div>Do you want to stop the <br /> Sync of the integration?</div>
          <el-button v-loading="btnLoading"
                     element-loading-spinner="el-icon-loading"
                     style="width:100%;margin-top:10px"
                     size="mini"
                     @click="startStop(itemInfo)"
                     type="danger">YES</el-button>
        </template>
        <div  slot="reference">
            <el-tooltip class="item" effect="dark" content="Stop Sync" placement="top" :open-delay="1000">
              <el-badge v-if="onoff === 'ON'&&itemInfo.showOnOff"  is-dot class="item" style="margin-top:-1.5px">
                <span style="font-size:14px;padding:7px;margin-left:10px;" class="cuserred cuifont icon_pause"></span>
              </el-badge>
            </el-tooltip>
        </div>
      </el-popover>
      </div>
      <div>
        <view-linked-info :linkKey="`${itemInfo.sync.subjectCode}wiki`" ></view-linked-info>
      </div>
      <!--      <el-tooltip class="item"
                  effect="dark"
                  content="Help"
                  placement="top">
        <span @click="routerTo(itemInfo.wiki)"
              style="font-size:14px;padding:2px 7px;margin-left:10px"
              class="cuser cuifont icon_help_circle"></span>
      </el-tooltip> -->
      <el-tooltip class="item"
                  effect="dark"
                  content="Close"
                  :open-delay="1000"
                  placement="top">
        <span style="font-size:14px;padding:2px 7px;margin-left:10px"
              class="cuser cuifont icon_dismiss"
              @click="closeLogVisible"></span>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { Component } from '../modules/Component.js'
export default {
  props: {
    subjectCode: String,
    itemInfo: Object,
    itemTitle: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      visible: false,
      testLoading: false,
      btnLoading: false,
      syncLoading: false,
      onoff: 'ON',
      functionList: [
        {
          icon: '',
          title: 'Test',
          url: '',
          introduction: 'Test Function Introduction',
          hidden: this.subjectCode === 'TEAMS'
        },
        {
          icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTDG1IgUvp1BhdBawnDW1RgaUi9T4Hjec8h-iqwPVaJnpLCl-vB&usqp=CAU',
          title: 'Synchronous',
          introduction: 'Synchronous Function Introduction'
        },
        {
          icon: 'https://assets.materialup.com/uploads/20098789-f2dc-4b26-8ac2-4a47a164a025/preview.jpeg',
          title: 'Stop/Start',
          introduction: 'Stop/Start Function Introduction'
        }
      ]
    }
  },
  created () {
    // this.getOnOff()
  },
  watch: {
    onoff (val) {
      if (val === 'ON') {
        this.trunOffHandler(false)
      } else {
        this.trunOffHandler(true)
      }
    }
  },
  methods: {
    routerTo (url) {
      window.open(url, '_blank')
    },
    trunOffHandler (val) {
      this.$emit('trunOffHandler', val)
    },
    closeLogVisible () {
      this.$emit('closeLogVisible')
    },
    startTest (itemInfo) {
      this.$emit('startTest', itemInfo)
    },
    syncData () {
      this.$root.eventBus.$emit('refreshList')
    },
    startStop (itemInfo) {
      this.btnLoading = true
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: this.subjectCode,
        onoff: this.onoff === 'ON' ? 'OFF' : 'ON',
        creator: this.$store.state.user.id
      }

      this.$interface.taskManager.controlTdDataSync(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.btnLoading = false
            this.visible = false
            return this.$message.error(res.msg)
          }
          this.onoff = res.data
          Component.$emit('getConnectorConfig')
          this.btnLoading = false
          this.visible = false
          if (this.$refs.popover) {
            this.$refs.popover.doClose()
          }
        })
        .catch(() => {
          this.btnLoading = false
          this.visible = false
        })
    },
    getOnOff () {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: this.subjectCode
      }

      this.$interface.taskManager.controlTdGetOnOffStatusSync(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.onoff = res.data
        })
        .catch(() => { })
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-icon-loading {
  margin-top: 15px !important;
}
::v-deep .el-badge__content {
  margin-top: 10px;
  margin-right: 7px;
}
.cuser:hover {
  cursor: pointer;
  color: #138dc7;
  background-color: #e6f7ff;
  border-radius: 4px;
}
.cuserred:hover {
  cursor: pointer;
  color: #ff6167;
  background-color: #fff0f0;
  border-radius: 4px;
}
.log_function {
  ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    li {
      list-style: none;
    }
  }
  .card-content-list-item-fun {
    width: 100%;
    // display: list-item;
    // display: grid;
    width: 242px;
    height: 32px;
    background: #138dc7;
    border-radius: 2px;
    margin-right: 20px;
    margin-bottom: 0;
    & > div {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      margin-bottom: 20px;
      color: #fff;
      width: 100%;
      span {
        font-size: 12px;
        font-weight: 400;
      }
      button {
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        width: 100%;
      }
    }
  }
  .card-content-list-item-fun:last-child {
    margin-right: 0;
  }
  .card-content-list-item-right-top-content {
    line-height: 20px;
    text-align: center;
  }
}
</style>
